<template>
    <div class="box">
        <div :class="index === 0 ? 'green' : ''" @click="changIndex(0)">微信</div>
        <div :class="index === 1 ? 'green' : ''" @click="changIndex(1)">通讯录</div>
        <div :class="index === 2 ? 'green' : ''" @click="changIndex(2)">发现</div>
        <div :class="index === 3 ? 'green' : ''" @click="changIndex(3)">我</div>
    </div>

    <br />
    <!-- 条件渲染 -->

    <div v-if="num < 60">不及格</div>
    <!-- <div v-else>及格</div> -->
    <div v-else-if=" num >= 60 && num < 85">中</div>
    <div v-else>优秀</div>

    <div v-if="num < 70">v-if 小于70</div>
    <div v-show="num < 70">v-show 小于70</div>

</template>

<script setup>
import { ref } from 'vue'
const index = ref(0)


const changIndex = (num) => {
    index.value = num
}


const num = ref(60)

</script>

<style scoped>
.box {
    width: 200px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.green {
    color: green;
}
</style>